<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <title>后台登陆</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="css/admin.css" />
     <script src="js/jquery-1.12.4.min.js"></script>
     <script type="text/javascript">
          function () {
               //得到焦点
               $("#password").focus(function () {
                    $("#left_hand").animate({
                         left: "150"
                         , top: " -38"
                    }, {
                         step: function () {
                              if (parseInt($("#left_hand").css("left")) > 140) {
                                   $("#left_hand").attr("class", "left_hand");
                              }
                         }
                    }, 2000);
                    $("#right_hand").animate({
                         right: "-64"
                         , top: "-38px"
                    }, {
                         step: function () {
                              if (parseInt($("#right_hand").css("right")) > -70) {
                                   $("#right_hand").attr("class", "right_hand");
                              }
                         }
                    }, 2000);
               });
               //失去焦点
               $("#password").blur(function () {
                    $("#left_hand").attr("class", "initial_left_hand");
                    $("#left_hand").attr("style", "left:100px;top:-12px;");
                    $("#right_hand").attr("class", "initial_right_hand");
                    $("#right_hand").attr("style", "right:-112px;top:-12px");
               });
          }
     </script>
</head>

<body>
     <div class="top_div">
     </div>
     <div style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 200px; text-align: center;">
          <div style="width: 165px; height: 96px; position: absolute;">
               <div class="tou"></div>
               <div class="initial_left_hand" id="left_hand"></div>
               <div class="initial_right_hand" id="right_hand"></div>
          </div>
          <p style="padding: 30px 0px 10px; position: relative;"> <span class="u_logo"></span>
               <input class="ipt" type="text" placeholder="请输入管理员账号" value=""> </p>
          <p style="position: relative;"> <span class="p_logo"></span>
               <input class="ipt" id="password" type="password" placeholder="请输入密码" value=""> </p>
          <div style="height: 50px; line-height: 50px; margin-top: 30px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
               <p style="margin: 0px 35px 20px 45px;"> <span style="float: left;"><a style="color: rgb(204, 204, 204);"
href="#">忘记密码?</a></span> <span style="float: right;"><a style="color: rgb(204, 204, 204); margin-right: 10px;"
href="#">注册</a>
              <a style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;"
href="admin_index.html">登录</a>
           </span> </p>
          </div>
     </div>
     <div style="text-align:center;"> </div>
</body>

</html>
